<template>
	<div :class="headIos?'archieve_container-ios':'entry_container'">
		<k-header headTitle="注册" goBack="true"></k-header>
		<div class="entry_content">
			<span class="sign_message">验证码发送至 <span class="sign_phone">18989998898</span> 请注意查收</span>
			<span class="sing_iden">请输入收到的验证码</span>
			<div class="ipt-box-nick">
		        <input type="tel" autofocus="autofocus" maxlength="4" v-model="message" v-on:input ="inputFunc" class="ipt-real-nick _input"/>
		        <div class="ipts-box-nick">
		            <div class="ipt-fake-box">
			            <input type="text" :value="one" class="current">
			            <input type="text" :value="two" :class="{'current':two}">
			            <input type="text" :value="three" :class="{'current':three}">
			            <input type="text" :value="four" :class="{'current':four}">
		            </div>
		        </div>
		    </div>
			<button :disabled="dis" @click="refresh" class="refresh">重新发送验证码</button><span v-if="count" class="time" >({{time}})</span>
		</div>
	</div>
</template>

<script>
	import kHeader from '../common/head'
	export default {
        data () {
            return {
            	dis : false,
            	time: 60,
            	count:true,
            	one:'',
            	two:'',
            	three:'',
            	four:'',
				message:'',
				headIos:false
            }
        },
        components: {
        	kHeader
        },
        created () {
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
		    this.dis=true;
    		var that = this;
    		var iTime = setInterval(function(){
    			that.time--;
    			if(that.time ==0){
    				that.count=false;
    				that.time=60;
    				that.dis=false;
    				clearInterval(iTime);
    			}
    		},1000);
    		
		},
        methods: {
        	refresh : function(){
        		this.dis=true;
        		var that = this;
        		that.count=true;
        		var iTime = setInterval(function(){
        			that.time--;
        			if(that.time ==0){
        				that.time = 60;
        				that.count=false;
        				that.dis = false;
        				clearInterval(iTime);
        			}
        		},1000)
        	},
        	inputFunc : function(){
        		this.one=this.message[0];
        		this.two=this.message[1];
        		this.three=this.message[2];
        		this.four=this.message[3];
        	}
        }
        
    }
</script>
	
<style>
	.refresh{
	    background: none;
	    border: none;
	    color: #F89721;
	    margin-left: 14%;
	}
	.time{
		color: #F89721;
	}
    .sign_message{
    	margin-top: 24px;
    	display: block;
    	width: 100%;
    	text-align: center;
    	font-size: 14px;
		color: #808080;
		letter-spacing: 0;
		line-height: 14px;
    }
    .sign_phone{
    	color: #F89721;
    }
    .sing_iden{
	    display: block;
	    font-size: 16px;
	    color: #808080;
	    margin-top: 35px;
	    text-align: center;
    }
    /*输入框*/
    .ipt-box-nick {
    	width: 72%;
	    padding-left: 0;
	    margin: 0 14%;
	    position: relative;
	    text-indent: 10%;
		height: 44px;
		line-height: 44px;
		margin-top: 36px;
		margin-bottom: 15px;
	}
	.ipt-real-nick{
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 44px;
	    line-height: 44px;
	    background: blueviolet;
	    padding: 0;
	    margin: 0;
	    z-index: 3; 
	    opacity: 0;
	}
	.ipts-box-nick {
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 1;
    	width: 100%;
    	height: 44px;
    	line-height: 44px;
    	overflow: hidden; 
    }
    .ipts-box-nick .ipt-fake-box {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between; 
    }
    .ipts-box-nick .ipt-fake-box input {
        width: 23%;
	    height: 44px;
	    border-bottom: 1px solid #D7D7D7;
	    font-weight: bold;
	    text-align: center;
	    padding: 0;
	    margin: 0 2.66% 0 0;
	    font-size: 24px;
		color: #212121;
		background: none;
    }
    .current{
    	border-bottom: 1px solid black !important;
    }
    .ipts-box-nick .ipt-fake-box input:nth-child(4){
    	margin: 0;
    }
</style>